<template>
  <el-row>
    <!-- 待办任务 -->
    <el-col :span="14">
      <el-card class="box-card card-body">
        <div class="header">
          <p>待办任务
            <el-tooltip
              placement="bottom-start"
              effect="light"
              class="tipInfo"
            >
              <template #content>
                <div class="todoTasks1">
                  <span>待取件率=待取件/(下单数量-取消数量)，且取件类型=上门取件</span>
                  <span>待派送率=待派送/(待派送+派送中+已签收+拒收)</span>
                  <span>未分配率=未分配/全部数据</span>
                  <span>超时率=超时任务/(已完成+进行中+已取消)</span>
                </div>
              </template>
              <img src="@/assets/assets/tip.png" class="tip">
            </el-tooltip>
          </p>
          <div class="el-icon-refresh" @click="nowTime">{{ time }} - 2023-09-12 23:59</div>
        </div>
        <div class="content">
          <div id="liquidFill" ref="liquid">
            <!-- 水球 -->
          </div>
          <div class="bottom-label">
            <div class="item" @click="$router.push('/tree/tree')">
              <span>待取件</span>
              <span>{{ backlog.waitingPickupNumber }}</span>
            </div>
            <div class="item" @click="$router.push('/tree/tree')">
              <span>待派件</span>
              <span>{{ backlog.waitingDispatchNumber }}</span>
            </div>
            <div class="item">
              <span>未分配运输</span>
              <span>{{ backlog.unassignedTransportTaskNumber }}</span>
            </div>
            <div class="item">
              <span>超时运输</span>
              <span>{{ backlog.timeoutTransportTaskNumber }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col :span="10">
      <el-card class="box-card card-body">
        <div class="header">
          <p>执行中任务
            <el-tooltip
              placement="bottom-start"
              effect="light"
              class="tipInfo"
            >
              <template #content>
                <div class="todoTasks1">
                  <span>运输率=运输中/(全部订单-待取件-已取件-网点入库-待装车-已取消）</span>
                  <span>派送率=派送中/(待派送+派送中+已签收+拒收）
                  </span>
                </div>
              </template>
              <img src="@/assets/assets/tip.png" class="tip">
            </el-tooltip>
          </p>
          <div class="el-icon-refresh" @click="nowTime">{{ time }}</div>
        </div>
        <div class="content">
          <div id="liquidFill" ref="liquid1">
            <!-- 水球 -->
          </div>
          <div class="bottom-label">
            <div class="item" @click="$router.push('/tree')">
              <span>运输中</span>
              <span>{{ todaydata.taskInTransitNumber }}</span>
            </div>
            <div class="item" @click="$router.push('/tree')">
              <span>派送中</span>
              <span>{{ todaydata.taskInDeliveryNumber }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  props: {
    backlog: {
      type: [Object],
      default: function() { return [] }
    },
    todaydata: {
      type: [Object],
      default: function() { return [] }
    }
  },
  data() {
    return {
      time: ''
    }
  },
  watch: {
    backlog: {
      deep: true,
      handler() {
        this.liquid.setOption({
          series: [{
            type: 'liquidFill', // 类型
            data: [this.backlog.waitingPickupRate * 0.01, this.backlog.waitingPickupRate * 0.01], // 数据是个数组 数组的每一项的值是0-1
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
            // show: true , //是否显示轮廓 布尔值
              borderDistance: 0, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#e9856f', // 边框的颜色
                borderWidth: 4 // 边框的宽度
              // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
              // shadowColor: '#000' //外部轮廓的阴影颜色
              }
            },
            backgroundStyle: {
              color: '#ffe5e0', // 图表的背景颜色
              borderWidth: '5', // 图表的边框宽度
              borderColor: '#fff' // 图表的边框颜色
            },
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
              shadowColor: '#f60'// 阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6 // 鼠标经过波浪颜色的透明度
              }
            },
            color: ['rgba(0,0,0,0)', '#e35d3e'], // 水波的颜色 对应的是data里面值
            shape: 'circle', // 水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ['15%', '50%'], // 图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: '65%', // 图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 9, // 振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: '50%', // 波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, // 波的相位弧度 默认情况下是自动
            period: (value, index) => { // 控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引
              return index * 2000
            },
            direction: 'right', // 波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, // 控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: 'linear', // 初始动画
            animationEasingUpdate: 'quarticInOut', // 数据更新的动画效果
            animationDuration: 3000, // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300 // 数据更新动画的时长

          },
          {
            type: 'liquidFill',
            data: [this.backlog.waitingDispatchRate * 0.01, this.backlog.waitingDispatchRate * 0.01],
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderColor: '#ffcd74',
                borderWidth: 4
              }
            },
            backgroundStyle: {
              color: '#fff1d9',
              borderWidth: '5',
              borderColor: '#fff'
            },
            itemStyle: {
              opacity: 1,
              shadowBlur: 0,
              shadowColor: '#f60'
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6
              }
            },
            color: ['rgba(0,0,0,0)', '#ffc45e'],
            shape: 'circle',
            center: ['38%', '50%'],
            radius: '65%',
            amplitude: 9,
            waveLength: '50%',
            phase: 0,
            period: (value, index) => {
              return index * 2000
            },
            direction: 'right',
            waveAnimation: true,
            animationEasing: 'linear',
            animationEasingUpdate: 'quarticInOut',
            animationDuration: 3000,
            animationDurationUpdate: 300

          },
          {
            type: 'liquidFill',
            data: [this.backlog.unassignedTransportTaskRate * 0.01, this.backlog.unassignedTransportTaskRate * 0.01],
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderColor: '#ff9b41',
                borderWidth: 4
              }
            },
            backgroundStyle: {
              color: '#ffead7',
              borderWidth: '5',
              borderColor: '#fff'
            },
            itemStyle: {
              opacity: 1,
              shadowBlur: 0,
              shadowColor: '#f60'
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6
              }
            },
            color: ['rgba(0,0,0,0)', '#ff9b41'],
            shape: 'circle',
            center: ['62%', '50%'],
            radius: '65%',
            amplitude: 9,
            waveLength: '50%',
            phase: 0,
            period: (value, index) => {
              return index * 2000
            },
            direction: 'right',
            waveAnimation: true,
            animationEasing: 'linear',
            animationEasingUpdate: 'quarticInOut',
            animationDuration: 3000,
            animationDurationUpdate: 300

          },
          {
            type: 'liquidFill',
            data: [this.backlog.timeoutTransportTaskRate * 0.01, this.backlog.timeoutTransportTaskRate * 0.01],
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderColor: '#f0e39a',
                borderWidth: 4
              }
            },
            backgroundStyle: {
              color: '#fafade',
              borderWidth: '5',
              borderColor: '#fff'
            },
            itemStyle: {
              opacity: 1,
              shadowBlur: 0,
              shadowColor: '#f60'
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6
              }
            },
            color: ['rgba(0,0,0,0)', '#edde83'],
            shape: 'circle',
            center: ['85%', '50%'],
            radius: '65%',
            amplitude: 9,
            waveLength: '50%',
            phase: 0,
            period: (value, index) => {
              return index * 2000
            },
            direction: 'right',
            waveAnimation: true,
            animationEasing: 'linear',
            animationEasingUpdate: 'quarticInOut',
            animationDuration: 3000,
            animationDurationUpdate: 300

          }]
        // backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
        })
        this.liquid1.setOption({
          series: [{
            type: 'liquidFill', // 类型
            data: [this.todaydata.taskInTransitRate * 0.01, this.todaydata.taskInTransitRate * 0.01], // 数据是个数组 数组的每一项的值是0-1
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
            // show: true , //是否显示轮廓 布尔值
              borderDistance: 0, // 外部轮廓与图表的距离 数字
              itemStyle: {
                borderColor: '#e9856f', // 边框的颜色
                borderWidth: 4 // 边框的宽度
              // shadowBlur: 5 , //外部轮廓的阴影范围 一旦设置了内外都有阴影
              // shadowColor: '#000' //外部轮廓的阴影颜色
              }
            },
            backgroundStyle: {
              color: '#ffe5e0', // 图表的背景颜色
              borderWidth: '5', // 图表的边框宽度
              borderColor: '#fff' // 图表的边框颜色
            },
            itemStyle: {
              opacity: 1, // 波浪的透明度
              shadowBlur: 0, // 波浪的阴影范围
              shadowColor: '#f60'// 阴影颜色
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6 // 鼠标经过波浪颜色的透明度
              }
            },
            color: ['rgba(0,0,0,0)', '#e35d3e'], // 水波的颜色 对应的是data里面值
            shape: 'circle', // 水填充图的形状 circle默认圆形  rect圆角矩形  triangle三角形  diamond菱形  pin水滴状 arrow箭头状  还可以是svg的path
            center: ['27%', '50%'], // 图表相对于盒子的位置 第一个是水平的位置 第二个是垂直的值 默认是[50%,50%]是在水平和垂直方向居中 可以设置百分比 也可以设置具体值
            radius: '65%', // 图表的大小 值是圆的直径 可以是百分比 也可以是具体值 100%则占满整个盒子 默认是40%; 百分比下是根据宽高最小的一个为参照依据
            amplitude: 9, // 振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
            waveLength: '50%', // 波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
            phase: 0, // 波的相位弧度 默认情况下是自动
            period: (value, index) => { // 控制波的移动速度 可以是函数 也可以是数字 两个参数  value 是data数据里面的值 index 是data值的索引
              return index * 2000
            },
            direction: 'right', // 波移动的速度 两个参数  left 从右往左 right 从左往右
            waveAnimation: true, // 控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
            animationEasing: 'linear', // 初始动画
            animationEasingUpdate: 'quarticInOut', // 数据更新的动画效果
            animationDuration: 3000, // 初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
            animationDurationUpdate: 300 // 数据更新动画的时长

          },
          {
            type: 'liquidFill',
            data: [this.todaydata.taskInDeliveryRate * 0.01, this.todaydata.taskInDeliveryRate * 0.01],
            label: {
              normal: {
                textStyle: {
                  color: '#20232a',
                  insideColor: '#20232a',
                  fontSize: 20,
                  fontWeight: 400
                }
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderColor: '#ffcd74',
                borderWidth: 4
              }
            },
            backgroundStyle: {
              color: '#fff1d9',
              borderWidth: '5',
              borderColor: '#fff'
            },
            itemStyle: {
              opacity: 1,
              shadowBlur: 0,
              shadowColor: '#f60'
            },
            emphasis: {
              itemStyle: {
                opacity: 0.6
              }
            },
            color: ['rgba(0,0,0,0)', '#ffc45e'],
            shape: 'circle',
            center: ['74%', '50%'],
            radius: '65%',
            amplitude: 9,
            waveLength: '50%',
            phase: 0,
            period: (value, index) => {
              return index * 2000
            },
            direction: 'right',
            waveAnimation: true,
            animationEasing: 'linear',
            animationEasingUpdate: 'quarticInOut',
            animationDuration: 3000,
            animationDurationUpdate: 300
          }]
        // backgroundColor: 'rgba(255,0,0,0.1)'容器背景颜色
        })
      }
    }
  },
  created() {
    this.nowTime()
  },
  mounted() {
    this.liquid = echarts.init(this.$refs.liquid)
    this.liquid1 = echarts.init(this.$refs.liquid1)
  },
  methods: {
    nowTime() {
      const timestamp = (new Date()).valueOf()
      const time = new Date(timestamp)
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hour = time.getHours()
      const minute = time.getMinutes()
      this.time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute)
      // console.log(this.time)
    }
  }
}
</script>

<style lang="scss" scoped>
.todoTasks1{
      color: #818693;
      font-size: 14px;
      span{
        display: block;
        line-height: 20px;
      }
    }
.tip{
      display: inline-block;
      width: 20px;
      height: 20px;
    }
.el-col{
  display: flex;
  flex-direction: column;
  padding: 0 12px;
}
.el-card{
 box-shadow: 0 0px 0px 0;
}
.el-card__body{
  padding: 23px 20px;
}
.header{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  .el-icon-refresh{
    font-size: 14px;
    color: #818693;
    cursor: pointer;
  }
  .el-icon-refresh::before{
    font-size: 15px;
    color: #e15536;
    margin-right: 8px;
  }
}
p{
  margin:0 0 16px;
  font-size: 16px;
  font-weight: 700;
}
.content{
  width: 100%;
  position: relative;
   #liquidFill{
    width: 100%;
    height: 208px;
  }
  .bottom-label{
    position: absolute;
    top: 190px;
    left: 20px;
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding-right: 40px;
    .item{
      cursor: pointer;
      background-color: #fff;
      flex: 25%;
      text-align: center;
      :first-child{
        font-weight: 700;
        margin-right: 5px;
      }
      :nth-child(2){
        color: #e15536;
        font-weight: 700;
      }
    }
  }
}
</style>
<style>
.el-tooltip__popper{
  padding: 20px;
}
</style>
